import React, { Component } from 'react'
import { Table, Button, Row, Col, Message } from 'antd';
import style from './index.scss';
import NewPizza from './NewPizza';
import Request from '../../utils/Request';

export default class index extends Component {
  state = {
    menus: []
  };
  // 进来的时候就获取数据,放入右侧菜单
  // 钩子函数
  componentDidMount() {
    this.getMenusData();
  }
  // 获取菜单列表的数据
  getMenusData = () => {
    Request('/menu.json').then(res => {
      console.log(res);
      if (res && res.status === 200 && res.data) {
        const { data } = res;
        this.setState(() => {
          const menus = [];
          for (const key in data) {
            menus.push({
              key: key,
              name: data[key].name
            });
          }
          return { menus };
        });
      }
    });
  };
  renderNewPizza() {//左边模块
    return <NewPizza />
  }
  rederMenuTable() {//右边模块
    const columns = [
      {
        key: 'name',
        title: '品种',
        dataIndex: 'name'
      },
      {
        key: 'action',
        title: '删除',
        render: (text, record) => (
          <Button
            onClick={() => handleDelete(record)}
            className={style['del-btn']}
          >
            <span>x</span>
          </Button>
        )
      }
    ];
    // 删除数据
    const handleDelete = record => {
      // 传入要删除的key
      Request(`/menu/${record.key}.json`, {
        method: 'delete'
      }).then(res => {
        // console.log(res);
        if (res && res.status === 200) {
          Message.success('删除成功');
          window.location.href = '/#/menus';
        } else {
          Message.error('删除失败');
        }
      });
    };
    /**
         * /  pagination={false} 隐藏底部的页数 ,右边展示
         * dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。
         *  */
    return (
      <Table
        className="menus-table cart"
        pagination={false}
        dataSource={this.state.menus}
        columns={columns}
        // locale默认文案设置，目前包括排序、过滤、空数据文案
        locale={{
          emptyText: "菜单暂无商品"
        }}
      />
    )
  }
  render() {
    return (
      <Row>
        <Col sm={24} md={16} className={style.left}>
          {this.renderNewPizza()}
        </Col>
        <Col sm={24} md={8} className={style.right}>
          <h3>菜单</h3>
          {this.rederMenuTable()}
        </Col>
      </Row>
    )
  }
}
